<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <div class="section">
                <h1>Cadastrando</h1>
                <h:form id="formCustomer">
                    <p:growl id="msg" life="3000"/>
                    <div class="container_24 clearfix">

                        <p:panel header="Dados Gerais" id="panelDados">
                            <p:outputLabel value="Nome:" styleClass="grid_3" for="name" />
                            <p:inputText id="name" styleClass="grid_19" style="width: 78.3% !important; "
                                         required="true" requiredMessage="Campo nome é obrigatório" 
                                         value="#{managerCreateCustomer.customer.name}" />


                            <p:outputLabel value="CPF:" styleClass="grid_3" for="cpf" />
                            <p:inputMask id="cpf" mask="999.999.999-99" required="true" 
                                         requiredMessage="Campo CPF é obrigatório" styleClass="grid_8" 
                                         value="#{managerCreateCustomer.customer.cpf}" />
                            <p:outputLabel value="RG:" styleClass="grid_3" />
                            <p:inputText styleClass="grid_8" maxlength="12" value="#{managerCreateCustomer.customer.rg}" />


                            <p:outputLabel value="Sexo:" styleClass="grid_3"/>
                            <div class="grid_8" >
                                <p:selectOneMenu panelStyle="width:150px;" value="#{managerCreateCustomer.customer.gender}">  
                                    <f:selectItem itemLabel="" itemValue="" />  
                                    <f:selectItems value="#{managerCreateCustomer.gender}" />  
                                </p:selectOneMenu> 
                            </div>
                            <p:outputLabel value="Profissão:" styleClass="grid_3" style="left: 10px;"  />
                            <p:inputText styleClass="grid_8" style=" left: 10px;"
                                         value="#{managerCreateCustomer.customer.profession}" />
                            <div class="clear-both" />
                            <p:outputLabel value="Nacionalidade:" styleClass="grid_3 nationalityLabel" />
                            <p:inputText styleClass="grid_8" value="#{managerCreateCustomer.customer.nationality}"/>
                            <p:outputLabel value="Estado Civil:" styleClass="grid_3 civilStatusLabel" />
                            <div class="grid_8" >
                                <p:selectOneMenu id="ecivil" panelStyle="width:150px;" value="#{managerCreateCustomer.customer.civilStatus}">  
                                    <f:selectItem itemLabel="" itemValue="" />  
                                    <f:selectItems value="#{managerCreateCustomer.civilStatus}" />  
                                    <p:ajax update=":formCustomer:panelConj" process="@this" 
                                             listener="#{managerCreateCustomer.ajaxTypeCivisStatus}" />
                                </p:selectOneMenu> 
                            </div>

                            <p:outputLabel value="Data Nasc.:" styleClass="grid_3 dataNascLabel"  />
                            <p:calendar showOn="button" styleClass="grid_8"                                                                       
                                        pattern="dd/MM/yyyy"
                                        value="#{managerCreateCustomer.customer.dateOfBirth}"/>
                            <p:outputLabel value="Telefone:" styleClass="grid_3"  style="left: 10px;"   />
                            <p:inputMask mask="99-9999-9999" styleClass="grid_8" style=" left: 10px;"
                                         value="#{managerCreateCustomer.customer.fixedPhone}" />

                            <p:outputLabel value="Celular:" styleClass="grid_3" />
                            <p:inputMask mask="99-9999-9999" styleClass="grid_8" value="#{managerCreateCustomer.customer.celPhone}" />
                            <p:outputLabel value="Email:" styleClass="grid_3" />
                            <p:inputText styleClass="grid_8" value="#{managerCreateCustomer.customer.email}" />
                            <div class="clear"/>
                        </p:panel>
                        <br/>


                        <p:panel header="Endereço" id="endereco" >

                            <p:outputLabel value="Rua:" styleClass="grid_3" />
                            <p:inputText styleClass="grid_19"  value="#{managerCreateCustomer.address.patio}" 
                                         style="width: 78.3% !important;" />
                            <p:outputLabel value="Cep:" styleClass="grid_3" />
                            <p:inputMask mask="99.999-999" styleClass="grid_8" value="#{managerCreateCustomer.address.cep}" />

                            <p:outputLabel value="Bairro:" styleClass="grid_3" />
                            <p:inputText  styleClass="grid_8" value="#{managerCreateCustomer.address.district}" />
                            <p:outputLabel value="Complemento:" styleClass="grid_3 complementLabel" />
                            <p:inputText styleClass="grid_8" value="#{managerCreateCustomer.address.complement}" />

                            <p:outputLabel value="Nº:" styleClass="grid_3 complementLabel" />
                            <p:inputText styleClass="grid_8" value="#{managerCreateCustomer.address.num}" />
                            <p:outputLabel  value=" Cidade:" styleClass="grid_3"  />
                            <p:autoComplete styleClass="grid_8" dropdown="true" converter="cityconverter"   
                                            var="cityValue" itemLabel="#{cityValue.name.toString().concat(' - ')}#{cityValue.country.sgl}" 
                                            itemValue="#{cityValue}" value="#{managerCreateCustomer.city}"
                                            scrollHeight="200" forceSelection="true"
                                            completeMethod="#{managerCreateCustomer.autocompleteCity}" /> 


                            <p:outputLabel value="Tipo:" styleClass="grid_3" style="left: 10px;"/>
                            <div class="grid_8" >
                                <p:selectOneMenu panelStyle="width:150px;" style="left: 10px;" 
                                                 value="#{managerCreateCustomer.address.typeAddress}">  
                                    <f:selectItem itemLabel="" itemValue="" />  
                                    <f:selectItems value="#{managerCreateCustomer.typeAddress}" />  
                                </p:selectOneMenu> 
                            </div>
                            <div class="clear"/>


                            <div class="buttonAction">
                                <p:commandButton value="Adicionar"
                                                 actionListener="#{managerCreateCustomer.addAddress()}"
                                                 update="endereco, tableAdd"
                                                 process="endereco"
                                                 icon="ui-icon-plus"/>
                                <p:commandButton value="Limpar" icon="ui-icon-close" 
                                                 actionListener="#{managerCreateCustomer.cleanAddress()}" 
                                                 update="endereco" process="@this" />
                            </div>


                            <p:dataTable id="tableAdd" var="address" value="#{managerCreateCustomer.addresses}" 
                                         styleClass="grid_24"
                                         rowIndexVar="rowid"
                                         emptyMessage="Nenhum registro">  
                                <f:facet name="header">
                                    Endereço
                                </f:facet>
                                <p:column headerText="Rua" width="300">  
                                    <h:outputText value="#{address.patio}"/>
                                </p:column>  
                                <p:column headerText="Bairro">  
                                    <h:outputText value="#{address.district}"/>
                                </p:column>
                                <p:column headerText="Tipo">  
                                    <h:outputText value="#{address.typeAddress}"/>
                                </p:column>

                                <p:column headerText="Ação" width="75">
                                    <p:commandButton  style="width: 20px; height: 20px;" 
                                                      update=":formCustomer:endereco, tableAdd"
                                                      process=":formCustomer:endereco, @this"
                                                      actionListener="#{managerCreateCustomer.edit(address,rowid)}"
                                                      icon="ui-icon-pencil"/>
                                    <p:commandButton  style="width: 20px; height: 20px;" 
                                                      update=":formCustomer:endereco, tableAdd"
                                                      process=":formCustomer:endereco, @this"
                                                      actionListener="#{managerCreateCustomer.remove(rowid)}"
                                                      icon="ui-icon-trash"/>
                                </p:column>
                            </p:dataTable>
                            <div class="clear"/>

                        </p:panel>

                        <div class="clear"/>
                        <p:panel header="Cônjuge" id="panelConj" style="#{managerCreateCustomer.conjugeVisible ? '' : 'display: none'}">

                            <p:outputLabel value="CPF:" styleClass="grid_3" for="conjCpf" />
                            <p:inputMask id="conjCpf" mask="999.999.999-99" styleClass="grid_8" 
                                         required="#{managerCreateCustomer.conjugeVisible}"
                                         value="#{managerCreateCustomer.conjugue.cpf}">
                                <p:ajax event="blur" process=":formCustomer:conjCpf,:formCustomer:conjNome, :formCustomer:conjRg" 
                                        update=":formCustomer:conjCpf,:formCustomer:conjNome, :formCustomer:conjRg "
                                        listener="#{managerCreateCustomer.customerExist()}" />
                            </p:inputMask>
                            <div class="clear-both"/>
                            <p:outputLabel  value="Nome :" styleClass="grid_3" for="conjNome" />
                            <p:inputText id="conjNome" styleClass="grid_20" style="width: 78.3% !important;"
                                         required="#{managerCreateCustomer.conjugeVisible}"
                                         value="#{managerCreateCustomer.conjugue.name}" />


                            <p:outputLabel  value="RG:" styleClass="grid_3" />
                            <p:inputText  id="conjRg" styleClass="grid_8" maxlength="12" value="#{managerCreateCustomer.conjugue.rg}" />
                            <p:outputLabel value="Contato:" styleClass="grid_3 dataNascLabel"  />
                            <p:inputMask mask="99-9999-9999" styleClass="grid_8" 
                                         value="#{managerCreateCustomer.conjugue.celPhone}" />
                         <div class="clear"/>
                        </p:panel>
                       


                        <h3 style="margin:0 0 10px 0">Anexo</h3>
                        <p:fileUpload 
                            mode="advanced"  
                            label="Anexar"
                            fileUploadListener="#{managerCreateCustomer.handle}"
                            multiple="true" 
                            auto="true"
                            invalidFileMessage="Tipo de arquivo não suportado."
                            invalidSizeMessage="Tamanho do arquivo não é suportado"
                            uploadLabel="Enviar"
                            cancelLabel="Cancelar"
                            immediate="false"
                            update="msg"
                            allowTypes="/(\.|\/)(gif|tif|jpe?g|png|pdf)$/"/> 

                        <div class="buttonAction">
                            <p:commandButton value="Salvar" 
                                             actionListener="#{managerCreateCustomer.save()}"
                                             update="@form" 
                                             icon="ui-icon-disk" 
                                             styleClass="ui-priority-primary"/>

                            <p:button value="Voltar"
                                      href="indexcustomer.xhtml"
                                      icon="ui-icon-arrowreturnthick-1-w"/>
                        </div>
                    </div>

                    <p:dialog header="Visualizar Endereço" widgetVar="dlg" modal="true"
                              showEffect="fade" hideEffect="fade" resizable="false" height="20">  
                        <h:outputText value="Dados do Endereço" /> <br/> 
                        <f:facet name="footer">

                            <h:panelGrid columns="2">
                                <p:outputLabel value="Cep :" style="float: right"/>
                                <p:outputLabel value="#{managerCreateCustomer.viewaddress.cep}"/>
                                <p:outputLabel value="Rua :" style="float: right"/>
                                <p:outputLabel value="#{managerCreateCustomer.viewaddress.patio}"/>
                                <p:outputLabel value="Bairro :" style="float: right"/>
                                <p:outputLabel value="#{managerCreateCustomer.viewaddress.district}"/>
                                <p:outputLabel value="Num :" style="float: right"/>
                                <p:outputLabel value="#{managerCreateCustomer.viewaddress.num}"/>
                                <p:outputLabel value="Tipo :" style="float: right"/>
                                <p:outputLabel value="#{managerCreateCustomer.viewaddress.typeAddress.name}"/>
                                <p:outputLabel value="Cidade :" style="float: right"/>
                                <p:outputLabel value="#{managerCreateCustomer.viewcity.name}"/>
                            </h:panelGrid>
                            <br/>
                            <center>
                                <p:commandButton value="Fechar" onclick="dlg.hide()" icon="ui-icon-close" />

                            </center>
                        </f:facet>

                    </p:dialog>
                </h:form>
            </div>
        </ui:define>
    </ui:composition>

</html>
